<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务架构图</title>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            margin: 0;
            padding: 0;
            height: 100vh;
        }

       .diagram {
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            margin: 20px;
            border: 4px solid #3498db;
        }

       .layer {
            display: flex;
            align-items: center;
            padding: 20px;
            border-radius: 12px;
            background-color: #f9fafb;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

       .layer:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
        }

       .layer h2 {
            margin: 0;
            width: 150px;
            text-align: right;
            padding-right: 20px;
            font-size: 22px;
            font-weight: 600;
            color: #374151;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }

       .layer ul {
            list-style-type: none;
            padding: 15px;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            flex: 1;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background-color: #ffffff;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }

       .layer li {
            margin: 5px;
            padding: 8px 16px;
            border-radius: 6px;
            background-color: #f3f4f6;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
            color: #4b5563;
        }

       .layer li:hover {
            background-color: #e5e7eb;
        }

        .features {
            padding: 10px;
            background-color: #f8f9fa;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div class="features">
        <p><font color="#764ba2"><b>JeapSik平台</b></font>架构图分为应用层、业务层、逻辑层、数据层和设施层。</p>
        <p>应用层包括WEB端和本地HTML；业务层涵盖水印相关、计算工具、绘图工具、二维码类、签章工具、图像处理、转换工具、信息解析、文档模板和架构图表；逻辑层涉及算法逻辑、业务规则、jQuery、JS和HTML5；数据层则关注本地数据；设施层包括服务器、网络映射和中间件。</p>
    </div>
    <div class="diagram">
        <!-- 应用层 -->
        <div class="layer">
            <h2>应用层</h2>
            <ul>
                <li>WEB端</li>
                <li>本地HTML</li>
            </ul>
        </div>
        <!-- 业务层 -->
        <div class="layer">
            <h2>业务层</h2>
            <ul>
                <li>水印相关</li>
                <li>计算工具</li>
                <li>绘图工具</li>
                <li>二维码类</li>
                <li>签章工具</li>
                <li>图片处理</li>
                <li>转换工具</li>
                <li>信息解析</li>
                <li>文档模版</li>
                <li>架构图表</li>
            </ul>
        </div>
        <!-- 逻辑层 -->
        <div class="layer">
            <h2>逻辑层</h2>
            <ul>
                <li>算法逻辑</li>
                <li>业务规则</li>
                <li>jQuery</li>
                <li>JS</li>
                <li>HTML5</li>
            </ul>
        </div>
        <!-- 数据层 -->
        <div class="layer">
            <h2>数据层</h2>
            <ul>
                <li>本地数据</li>
            </ul>
        </div>
        <!-- 基础设施层 -->
        <div class="layer">
            <h2>设施层</h2>
            <ul>
                <li>服务器</li>
                <li>网络映射</li>
                <li>中间件</li>
            </ul>
        </div>
    </div>
</body>

</html>
    